import axios from "axios";

let mixin = {
  data() {
    return {
      diahtml: '',
      dataSource: [],
    }
  },
  watch: {
    
  },
  computed: {
    ishistory: function () {
      return this.$store.state.daping.ishistorytime;
    },
    timerangarr: function () {
      return this.$store.state.daping.timepick;
    }
  },
  methods: {

    getefficcolor(thisRetMap, spid, curType, rangeArr, colors){
      var color = colors[9];
      if (thisRetMap[Number(spid)] != null) {
        if (thisRetMap[Number(spid)][curType] > rangeArr[0]) {
          color = colors[0];
        } else if (thisRetMap[Number(spid)][curType] > rangeArr[1]) {
          color = colors[1];
        } else if (thisRetMap[Number(spid)][curType] > rangeArr[2]) {
          color = colors[2];
        } else if (thisRetMap[Number(spid)][curType] > rangeArr[3]) {
          color = colors[3];
        } else if (thisRetMap[Number(spid)][curType] > rangeArr[4]) {
          color = colors[4];
        } else if (thisRetMap[Number(spid)][curType] > rangeArr[5]) {
          color = colors[5];
        } else if (thisRetMap[Number(spid)][curType] > rangeArr[6]) {
          color = colors[6];
        } else if (thisRetMap[Number(spid)][curType] > rangeArr[7]) {
          color = colors[7];
        } else if (thisRetMap[Number(spid)][curType] > rangeArr[8]) {
          color = colors[8];
        }
      }
      return color
    },

    getpointemsg(options) {

      this.showInfo = false

      //获取接口数据
      //数据返回显示弹窗
      //判断id
      let type = options.id.split(".")[0] == 'substation' ? 'substation' : 'heatplant'
      let pid = options.pid


      let requestBody = { // 热源
        "queries": [{
          "metric": "pid,name,m_001t,m_001p,m_002p,m_001q",
          "schema": "monitor"
        }],
        "table": "HeatPlant",
        "search": "pid=" + pid
      };
      if (type == "substation") {
        requestBody = { // 热力站
          "queries": [{
            "metric": "pid,name,m_001t,m_001p,m_002p,m_003q,m_003opening",
            "schema": "monitor"
          }],
          "table": "SubStation",
          "search": "pid=" + pid
        };
      }

      if (this.ishistory == "历史") {
        requestBody = {
          "queries": [{
            "metric": "pid,name,m_001t,m_001p,m_002p,m_001q",
            "schema": "monitor"
          }],
          "table": "HeatPlant",
          "search": "pid=" + pid,
          "type": "history",
          startTime: this.timerangarr[0].getTime(),
          endTime: this.timerangarr[1].getTime()
        };
        if (type == "substation") {
          requestBody = { // 热力站
            "queries": [{
              "metric": "pid,name,m_001t,m_001p,m_002p,m_003q,m_003opening",
              "schema": "monitor"
            }],
            "table": "SubStation",
            "search": "pid=" + pid,
            "type": "history",
            startTime: this.timerangarr[0].getTime(),
            endTime: this.timerangarr[1].getTime()
          };
        }
      }

      axios.post("/engipower/open/queryDb.do", requestBody).then(res => {
        //如果有则获取200中的结果
        let data = res.data
        let html = ''
        if (data.allTotal != 0) {
          if (type == "heatplant") {
            html = '<div style="font-size:10px;">' +
              '<p>名称: ' + data["200"][0].name + '</p>\n' +
              '<p>供压: ' + ((data["200"][0].m_001p) ? (data["200"][0].m_001p) : '-') + ' MPa</p>\n' +
              '<p>回压: ' + ((data["200"][0].m_002p) ? (data["200"][0].m_002p) : '-') + ' MPa</p>\n' +
              '<p>流量: ' + ((data["200"][0].m_001q) ? (data["200"][0].m_001q) : '-') + ' t/h</p>\n' +
              '<p>供温: ' + ((data["200"][0].m_001t) ? (data["200"][0].m_001t) : '-') + ' ℃</p>' + '</div>';
          }

          if (type == "substation") {
            html = '<div style="font-size:10px;">' +
              '<p>名称: ' + data["200"][0].name + '</p>\n' +
              '<p>一次供压: ' + ((data["200"][0].m_001p) ? (data["200"][0].m_001p) : '-') + ' MPa</p>\n' +
              '<p>一次回压: ' + ((data["200"][0].m_002p) ? (data["200"][0].m_002p) : '-') + ' MPa</p>\n' +
              '<p>瞬时流量: ' + ((data["200"][0].m_003q) ? (data["200"][0].m_003q) : '-') + ' t/h</p>\n' +
              '<p>一次供温: ' + ((data["200"][0].m_001t) ? (data["200"][0].m_001t) : '-') + ' ℃</p>\n' +
              '<p>阀门开度: ' + ((data["200"][0].m_003opening) ? (data["200"][0].m_003opening) : '-') + ' %</p>' + '</div>';
          }
        } else {
          html = '<div style="font-size:10px;">' +
            // '<p>名称: ' + feature.properties.name + '</p>\n' +
            '<p>未获取到该点数据' + '</p>\n' + '</div>';
        }

        this.$notify({
          title: '提示',
          dangerouslyUseHTMLString: true,
          message: html
        });

        this.diahtml = html
        this.testmsgbox(options)
        this.showInfo = true
      });
    },

    testmsgbox(options) {

      this._earth.sceneTree.root.children.push({
        "ref": 'pin1',
        "czmObject": {
          "name": 'Pin1',
          "xbsjType": "Pin",
          "position": [1.9017005694855162, 0.5972477268978722, 488.7695178987821],
          "near": 300,
          "show": false
        },
      })

      let pin1 = this._earth.sceneTree.$refs.pin1.czmObject;
      pin1.position = [options.position.longitude, options.position.latitude, options.position.height]
      XE.MVVM.track(this, 'winPos', pin1, 'winPos');

    },
    
    //创建3d卡片标识
    createLabel2(earth, options) {
      const evalString = `
            function createLabelCanvas(p) {
                const labelDiv = document.createElement('div');
                labelDiv.style = \`
                    // background: grey;
                    width: 300px;
                    height: 200px;
                    position: absolute;
                    pointer-events: none;
                \`;
                p._earth.czm.viewer.container.appendChild(labelDiv);
                p._labelDiv = labelDiv;
                // p.disposers是一堆会调用函数的数组，会在对象销毁时按照后进先出的顺序调用。
                p.disposers.push(() => {
                    if (p._labelDiv) {
                        p._earth.czm.viewer.container.removeChild(p._labelDiv);
                        p._labelDiv = undefined;
                    }
                });

                // 由enabled来控制可见性！
                p.disposers.push(XE.MVVM.watch(() => p.enabled, () => {
                    p._labelDiv.style.display = p.enabled ? 'block' : 'none';
                }));

                const labelCanvas = document.createElement('canvas');
                labelCanvas.style = \`
                    width: 100%;
                    height: 100%;
                \`;

                labelCanvas.width = 300;
                labelCanvas.height = 200;
                labelDiv.appendChild(labelCanvas);

                return labelCanvas;
            }

            function createDrawFunc(p) {
                const labelCanvas = createLabelCanvas(p);
                const ctx = labelCanvas.getContext('2d');
                function draw(w) {
                    ctx.clearRect(0, 0, 300, 200);

                    ctx.save();
                    ctx.beginPath();
                    ctx.rect((w-1)*300, 0, 300, 200);
                    ctx.clip();

                    ctx.strokeStyle = 'rgb(255, 255, 0)';
                    ctx.beginPath();
                    ctx.lineTo(0, 200);
                    ctx.lineTo(100, 100);
                    ctx.lineTo(250, 100);
                    ctx.stroke();
                    ctx.font = "16px console";
                    // ctx.textBaseline = "middle";
                    ctx.fillStyle = 'rgb(255, 255, 0)';
                    ctx.fillText('` + options.name + `', 110, 90);
                    ctx.restore();
                }

                p._dDraw = draw;
            }

            createDrawFunc(p);

            let d = 0;
            let c = 0;
            p._dDraw(c);
            const preUpdateListener = p._earth.czm.scene.preUpdate.addEventListener(() => {
                if (d !== c) {
                    c += (d - c) * 0.1;
                    if (Math.abs(c - d) < 0.1) {
                        c = d;
                    }
                    p._dDraw(c);
                }
            });
            p.disposers.push(() => preUpdateListener && preUpdateListener());

            const container = p._earth.czm.viewer.container;
            const unwatch = XE.MVVM.watch(() => [...p.winPos], winPos => {
                if (p._labelDiv) {
                    p._labelDiv.style.left = \`\${winPos[0]}px\`;
                    p._labelDiv.style.bottom = \`\${winPos[3]}px\`;
                }

                // winPos 为一个包含4个元素的数组，分别代表 [left, top, right, bottom]
                if (winPos[0] > container.offsetWidth * 0.3 && winPos[0] < container.offsetWidth * 0.7 &&
                    winPos[3] > container.offsetHeight * 0.3 && winPos[3] < container.offsetHeight * 0.7) {
                    d = 1.0;
                } else {
                    d = 0.0;
                }
            });
            p.disposers.push(() => { unwatch && unwatch(); });
            `;

      // let p = new XE.Obj.Pin(earth);
      // p.position = [2.1204918655649285,0.5452743468087804,209.94294540636682];
      // p.show = false;
      // p.evalString = evalString;

      console.log();


      const p = new XE.Obj.Pin(earth);
      const config = {
        // position: [2.1204918655649285, 0.5452743468087804, 209.94294540636682],
        position: options.position,
        show: false,
        evalString: evalString,
      };
      p.xbsjFromJSON(config);

      return p;
    }
  }
}

export default mixin